<template>
<div ref="echarts"
     :style="`width: 100%;height:${height}`"></div>
</template>

<script>
const echarts = require('echarts')
export default {
  name: "index",
  props:{
    option:{
      type:Object,
      required:true
    },
    height:{
      type:String,
      default:'400px'
    }
  },
  watch:{
    '$store.state.openBar'(){
      setTimeout(()=>{
        this.resize()
      },300)
    }
  },
  mounted() {
    this.init()
    window.addEventListener('resize',this.resize)
  },
  methods: {
    init(){
      this.ele = echarts.init(this.$refs.echarts)
      this.ele.setOption(this.option)
    },
    resize(){
      this.ele.resize({
        animation:{
          delay:200,
          duration:400
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
